import React, { Component } from 'react'
import { hashHistory } from 'react-router'
import { Icon } from 'antd-mobile'
import { NavHeader } from '../common'
import { AdjunctionBankcard } from './'

export default class BankcardList extends Component {
  constructor() {
    super()
    this.state = {
      modal: false,
    }
  }
  render() {
    const { modal } = this.state
    return (
      <div className={`rt-bankcard-list-container cm-column-flex-box`}>
        <NavHeader title="银行卡" onClick={() => hashHistory.goBack()} />
        <div className={`cm-hint-message-box`}>
          <span>银行卡：3张</span>
          <span className={`-rule`}>添加规则</span>
        </div>
        <div className={`cm-scrollable-container`}>
          {
            Array(2).fill(1).map((v, i) => (
              <div key={Math.random()} className={`rt-bankcard ${i === 0 ? '-first' : ''}`}>
                <div className={`-left`}>
                  <span className={`-name`}>中国工商银行</span>
                  <span>**** **** **** 1113</span>
                </div>
                <div className={`-right`}>
                  解除
                </div>
              </div>
            ))
          }

          <div className={`-adjunction-box`}>
            <Icon
              type="plus-square"
              onClick={() => {
                this.setState({modal: true})
              }}
            />
            <span>添加一张银行卡</span>
          </div>
        </div>
        <AdjunctionBankcard
          visible={modal}
          onClose={() => {
            this.setState({modal: false})
          }}
        />
      </div>
    )
  }
}